<@override name="content">
<div class="header">
  <h1 class="page-title">题目列表</h1>
</div>
<ul class="breadcrumb">
  <li>
    <a href="admin">首页</a>
    <span class="divider">/</span>
  </li>
  <li class="active">题目管理</li>
</ul>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="well">
      <div id="container">
        <table id="problem-list" class="table table-hover table-striped cf basetable dataTable" cellpadding="0"
               cellspacing="0" border="0" width="100%">
          <thead>
          <tr>
            <th width="5%">ID</th>
            <th width="45%">Title</th>
            <th width="5%">AC</th>
            <th width="5%">Submit</th>
            <th width="15%">Date</th>
            <th width="15%">Action</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</@override>

<@override name="styles">
<link href="assets/jquery.artDialog/skins/twitter.css" rel="stylesheet" type="text/css">
</@override>

<@override name="scripts">
<link href="assets/DataTables-1.9.4/media/css/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="assets/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/js/dataTables.bootstrap.js"></script>

<script src="assets/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>

<script type="text/javascript">
  var oTable = $('#problem-list').jfinalDataTable({
    "sAjaxSource": "/api/admin/problemList",
    "aoColumns": [
      {
        "mData": "pid",
        "mRender": function (data, type, full) {
          return '<a href="problem/show/' + full.pid + '" target="_blank">' + data + '</a>';
        }
      },
      {
        "mData": "title",
        "sClass": "title",
        "mRender": function (data, type, full) {
          return '<a href="admin/problem/show/' + full.pid + '">' + data + '</a> '
                  + (full.status ? '' : '<span class="status-label label label-important">Disabled</span>');
        }
      },
      {
        "mData": "accepted",
        "mRender": function (data, type, full) {
          return '<a href="status/?pid=' + full.pid + '&result=0" target="_blank">' + data + '</a>';
        }
      },
      {
        "mData": "submission",
        "mRender": function (data, type, full) {
          return '<a href="status/?pid=' + full.pid + '" target="_blank">' + data + '</a>';
        }
      },
      {
        "mData": "ctime",
        "mRender": function (data, type, full) {
          return parseTimestamp(data);
        }
      },
      {
        "mData": null,
        "bSortable": false,
        "mRender": function (data, type, full) {
          var action = '<a href="admin/problem/edit/' + full.pid
                  + '" class="btn btn-success">Edit</a> '
                  + '<a href="admin/problem/data/' + full.pid
                  + '" class="btn btn-info">Data</a> '
                  + '<button pid="' + full.pid
                  + '" class="btn btn-danger problem-rejudge">Rejudge</button> '
                  + '<button pid="' + full.pid
                  + '" data-next-status="' + !full.status + '"'
                  + ' class="btn btn-' + (full.status ? 'warning' : 'primary') + ' problem-toggle">'
                  + (full.status ? 'Disable' : 'Enable')
                  + '</button> ';
          return action;
        }
      }
    ]
  });

  $('table').on('click', '.problem-toggle', function () {
    var that = $(this);
    var status = that.data('next-status');
    var action = (status || status == 'true' ? 'Enable' : 'Disable');
    $.dialog({
      title: action + ' this problem',
      content: 'Are you sure?',
      cancelVal: 'Cancel',
      cancel: true,
      okVal: action,
      ok: function () {
        $.post('/api/admin/updateProblem', {pk: that.attr('pid'), name: 'status', value: status}, function (data) {
          status = !status;
          that.data('next-status', status);
          that.removeClass().addClass('btn btn-' + (status ? 'primary' : 'warning') + ' problem-toggle');
          that.html(status ? 'Enable' : 'Disable');
          var title_td = that.parent().siblings('td.title');
          if (status) {
            title_td.append('<span class="status-label label label-important">Disabled</span>');
          } else {
            title_td.children('.status-label').remove();
          }
        });
        this.close();
        return false;
      }
    });
  });
</script>
</@override>
<@extends name="../_layout.html"></@extends>
